<template>
  <div class="main-container">
    <div class="main-header">
      <a class="menu-link-main" href="#">All Apps</a>
      <div class="header-menu">
        <a
          v-for="(link, index) in headerLinks"
          :key="index"
          class="main-header-link"
          :class="{ 'is-active': link.isActive }"
          href="#"
          @click.prevent="activateLink(link)"
        >
          {{ link.text }}
        </a>
      </div>
    </div>
    <div class="content-wrapper">
      <ContentWrapper />
      <div class="content-section">
        <div class="content-section-title">Apps in your plan</div>
        <div class="apps-card">
          <AppsCard />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import ContentWrapper from './ContentWrapper.vue';
import AppsCard from './AppsCard.vue';
// 定义头部链接数据
const headerLinks = reactive([
  { text: 'Desktop', isActive: true },
  { text: 'Mobile', isActive: false },
  { text: 'Web', isActive: false }
]);

// 激活链接的函数
function activateLink(link) {
  headerLinks.forEach(l => {
    l.isActive = false;
  });
  link.isActive = true;
}
</script>
<style>
@import url(../css/main-container.css);
</style>